<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<script>
  // 基本数据类型和复杂数据类型最大的区别就是存储上的区别

  // 我们的存储空间分为栈和堆
  // - 栈：主要存放基本数据类型的内容
  // - 堆：主要存放复杂数据类型的内容



  // 基本数据类型就是直接存在栈里面

  // 引用数据类型存的时候是分成 地址和值
  // 首先存的是一个地址(在存储空间里面开辟的一个空间)，地址是存在堆里面的
  // 值是存在栈里面的，再通过关系引过来



  // 基本数据类型存的是值
  // 在比较基本数据类型的时候，比较的就是值
  var a = 3;
  var b = 3;
  console.log(a === b); // true


  // 引用数据类型存的是地址
  // 每当生成一个引用数据类型，都会在堆里面开辟一个新的空间
  // 引用数据类型比较的是地址
  // 所以不管里面的内容是否一样，比较的时候都是false
  // var obj1 = {
  //   a: 3,
  //   b: 4,
  // }
  // var obj2 = {
  //   a: 3,
  //   b: 4
  // }
  // console.log(obj1 === obj2); // false



  // 引用数据类型在赋值的时候，赋值的也是地址
  // var obj3 = {
  //   name: "zhangsan",
  //   age: 20
  // }
  // var obj4 = obj3;
  // console.log(obj4 === obj3); // true 它们的地址是一样的


  // 因为obj3和obj4的地址是一样（它们关联的数据是一样的）的，
  // 其中一个数据改了，那么另一个数据也改了
  // obj4.age = 30;
  // console.log(obj4); // {name: 'zhangsan', age: 30}
  // console.log(obj3); // {name: 'zhangsan', age: 30}


  // 刚才是改的是关联的数据
  // 完全给obj4了一个全新的对象，obj4重新开辟了一块新的地址，obj4和obj3就没有关系了
  // obj4 = {
  //   name: "zhangsan",
  //   age: 40
  // }
  // console.log(obj4); // {name: 'zhangsan', age: 40}
  // console.log(obj3); // {name: 'zhangsan', age: 20}






  // 假设有一个很复杂的obj3，需要创建一个和obj3长的一样的obj4，又需要相互不影响
  // var obj3 = {
  //   name: "zhangsan",
  //   age: 20,
  //   arr: [1,2,3],
  // }
  // var obj4 = {};
  // for (key in obj3) {
  //   obj4[key] = obj3[key];
  // }
  // console.log(obj4);
  // obj4.age = 100;
  // console.log(obj4);
  // console.log(obj3);




</script>